
{% include 'haoAdmin/head.html' %}

<body>
	<div class="admin-main">

		<blockquote class="layui-elem-quote">

		</blockquote>

		<fieldset class="layui-elem-field" style="width: 45%; float: left">
			<legend>主菜单列表</legend>
            <a href="javascript:;" class="layui-btn layui-btn-small" id="addMainMenu" style="margin-left: 15px;">
				<i class="layui-icon">&#xe608;</i> 添加菜单
			</a>

			<div class="layui-field-box" style="overflow-x: auto;">
				<table class="site-table table-hover">
					<thead>
						<tr>
							<th>菜单名称</th>
							<th>归属机构</th>
							<th>归属角色</th>
							<th>操作</th>
						</tr>
					</thead>

					<tbody id="tbodys">

					</tbody>

					<script type="text/html" id="menu_tpl">
						{% raw %}
							{{# layui.each(d.menus, function(index, item){ }}
								<tr>
                                    <td>{{ item.menu_name }}</td>
									<td>{{ item.org_name }}</td>
									<td>{{ item.role_name }}</td>
									<td>
										<a href="javascript:;" v="{{ item.pid }}"
                                           class="layui-btn layui-btn-normal layui-btn-mini getSiblingMenu">子菜单</a>
										<a href="javascript:;" class="layui-btn layui-btn-mini">编辑</a>
										<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
									</td>
								</tr>
							{{# }) }}
						{% endraw %}
					</script>
				</table>
			</div>
		</fieldset>

        <fieldset class="layui-elem-field" style="width: 50%; float: right">
            <legend><span id="parentMenuName"></span>子菜单列表</legend>
            <a href="javascript:;" class="layui-btn layui-btn-small" id="add" style="margin-left: 15px;">
				<i class="layui-icon">&#xe608;</i> 添加子菜单
			</a>

			<div class="layui-field-box" style="overflow-x: auto;">
				<table class="site-table table-hover">
					<thead>
						<tr>
							<th>菜单名称</th>
							<th>菜单URL</th>
							<th>归属机构</th>
							<th>归属角色</th>
							<th>操作</th>
						</tr>
					</thead>

					<tbody id="tbodys2">

					</tbody>

					<script type="text/html" id="menu_tpl2">
						{% raw %}
							{{# layui.each(d.menus, function(index, item){ }}
								<tr>
                                    {{# if(item.parent_name != ""){ }}
                                        <td>{{ item.menu_name }}</td>
                                    {{# } else { }}
                                        <td style="font-weight: bold">{{ item.menu_name }}</td>
                                    {{# } }}
                                    <td>{{ item.menu_url }}</td>
									<td>{{ item.org_name }}</td>
									<td>{{ item.role_name }}</td>
									<td>
										<a href="javascript:;" class="layui-btn layui-btn-mini">编辑</a>
										<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
									</td>
								</tr>
							{{# }) }}
						{% endraw %}
					</script>
				</table>
			</div>
		</fieldset>

		<div class="admin-table-page">
			<div id="page" class="page">
			</div>
		</div>
	</div>


	<script>
        var laytpl;

        layui.use(['laytpl'], function() {
            laytpl = layui.laytpl;

            $(function(){
                init_data();
            });
        });

        function init_data(){
            ajaxReq("menu/get_parent_menu", function(data){
                var tpl = document.getElementById('menu_tpl').innerHTML; //读取模版
                laytpl(tpl).render(data, function(render){
                  document.getElementById('tbodys').innerHTML = render;
                });

                getSiblingMenu();
            });
        }

        function getSiblingMenu() {
            $(".getSiblingMenu").click(function () {
                var menu_id = $(this).attr("v");
                var menuName = $(this).parent("td").siblings("td").eq(0).html();
                $("#parentMenuName").html("［" + menuName + "］");

                ajaxReq("menu/get_parent_menu", function(data){
                    var tpl = document.getElementById('menu_tpl2').innerHTML; //读取模版
                    //方式一：异步渲染（推荐）
                    laytpl(tpl).render(data, function(render){
                      document.getElementById('tbodys2').innerHTML = render;
                    });
                }, {menu_id: menu_id, is_children: "1"});
            })
        }

        $("#addMainMenu").click(function () {
           openwin("添加主菜单", "");
        });
	</script>
</body>
